<!--
/**
* @name OperateTable
* @description 新增和编辑表格
* @author wind-lc
* @date 2020-05-11
* @param {Boolean} operateVisible 是否打开新增和编辑抽屉
* @param {Object} operateData 新增和编辑抽屉数据
* @param {Event} handleVisible 关闭新增和编辑抽屉
* @example <operate-table :operateVisible="" :operateData="" @handleVisible=""></operate-table>
*/
-->
<template>
  <div calss="operate-form">
    <a-modal :title="title"
             :visible="operateVisible"
             :wrapClassName="isDetails?'modal-box modal-hidden-footer':'modal-box'"
             @cancel="handleVisible">
      <a-form-model ref="form"
                    :rules="rules"
                    :hideRequiredMark="isDetails"
                    :model="form">
        <a-form-model-item label="编码"
                           :label-col="{ span: 6 }"
                           :wrapper-col="{ span: 16 }"
                           prop="code">
          <a-input v-model="form.code"
                   v-show="!isDetails"
                   placeholder="请输入编码"
                   :maxLength="20">
          </a-input>
          <span v-show="isDetails">{{form.code}}</span>
        </a-form-model-item>
        <a-form-model-item label="名称"
                           :label-col="{ span: 6 }"
                           :wrapper-col="{ span: 16 }"
                           prop="name">
          <a-input v-model="form.name"
                   v-show="!isDetails"
                   placeholder="请输入名称"
                   :maxLength="20">
          </a-input>
          <span v-show="isDetails">{{form.name}}</span>
        </a-form-model-item>
        <a-form-model-item label="路径"
                           :label-col="{ span: 6 }"
                           :wrapper-col="{ span: 16 }"
                           prop="resValue">
          <a-input v-model="form.resValue"
                   v-show="!isDetails"
                   placeholder="请输入路径"
                   :maxLength="100">
          </a-input>
          <span v-show="isDetails">{{form.resValue}}</span>
        </a-form-model-item>
        <a-form-model-item label="类型"
                           :label-col="{ span: 6 }"
                           :wrapper-col="{ span: 16 }"
                           prop="resType">
          <a-select v-model="form.resType"
                    v-show="!isDetails"
                    placeholder="请选择类型">
            <a-select-option v-for="(item,index) in menuTypes"
                             :key="index"
                             :value="item.value">{{item.name}}</a-select-option>
          </a-select>
          <span v-show="isDetails">{{convertConstName(menuTypes, form.resType)}}</span>
        </a-form-model-item>
        <a-form-model-item label="序号"
                           :label-col="{ span: 6 }"
                           :wrapper-col="{ span: 16 }"
                           prop="sort">
          <a-input-number v-model="form.sort"
                          :min="1"
                          v-show="!isDetails"
                          placeholder="请输入序号"
                          :max="100"
                          class="input-width" />
          <span v-show="isDetails">{{form.sort || '无'}}</span>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button @click="handleVisible" icon="close-circle">取消</a-button>
        <a-button type="primary"
                  icon="save"
                  :loading="confirmLoading"
                  @click.native="handleConfirm">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { Modal, FormModel, Input, InputNumber, Button, Select } from 'ant-design-vue'
import { insertSelective, updateByPrimaryKeySelective } from '@/request/api/permissionManagement/menuManagement'
import { convertConstName } from '@/utils/filter'
export default {
  name: 'OperateTable',
  components: {
    AModal: Modal,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInput: Input,
    AInputNumber: InputNumber,
    AButton: Button,
    ASelect: Select,
    ASelectOption: Select.Option
  },
  props: {
    // 是否打开新增和编辑抽屉
    operateVisible: {
      type: Boolean,
      required: true
    },
    // 新增和编辑抽屉数据
    operateData: {
      type: Object,
      required: true
    },
    menuTypes: {
      type: Array,
      required: true
    }
  },
  watch: {
    // 监听抽屉打开关闭
    operateVisible: {
      handler (newV, oldV) {
        // 打开抽屉
        if (newV) {
          // 新增
          if (this.operateData.type === 'add') {
            this.title = '新增菜单'
          }
          // 编辑
          if (this.operateData.type === 'edit' || this.operateData.type === 'view') {
            this.title = '编辑菜单'
            if (this.operateData.type === 'view') {
              this.title = '菜单详细'
            }
            this.formLoadingVisible = true
            this.editId = this.operateData.row.id
          }
          // 数据写入表单
          for (const item in this.form) {
            this.form[item] = this.operateData.row[item] || undefined
          }
        }
      }
    }
  },
  computed: {
    isDetails () {
      return this.operateData.type === 'view'
    }
  },
  data () {
    return {
      // 标题
      title: '',
      // 表单
      form: {
        code: '',
        name: '',
        resValue: '',
        resType: undefined,
        sort: 1,
        parentId: ''
      },
      // 校验
      rules: {
        code: [
          {
            required: true,
            message: '请输入角色编码',
            trigger: 'change'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入角色名称',
            trigger: 'change'
          }
        ]
      },
      // 提交loading
      confirmLoading: false,
      // 编辑id
      editId: ''
    }
  },
  methods: {
    convertConstName,
    // 确定按钮
    handleConfirm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          for (const item in this.form) {
            this.form[item] = this.form[item] || ''
          }
          if (this.operateData.type === 'add') {
            // 新增菜单
            insertSelective(this.form).then(res => {
              this.confirmLoading = false
              if (res.code === '0') {
                this.$message.success('新增成功!')
                this.handleConfirmVisible()
              }
            }).catch(() => {
              this.confirmLoading = false
            })
          }
          if (this.operateData.type === 'edit') {
            // 编辑菜单
            this.$refs.form.validate(valid => {
              if (valid) {
                this.confirmLoading = true
                this.form.id = this.editId
                updateByPrimaryKeySelective(this.form).then(res => {
                  this.confirmLoading = false
                  if (res.code === '0') {
                    this.$message.success('编辑成功!')
                    this.handleConfirmVisible()
                  }
                }).catch(() => {
                  this.confirmLoading = false
                })
              }
            })
          }
        }
      })
    },
    resetForm () {
      this.$refs.form.resetFields()
      this.form = {
        code: '',
        name: '',
        resValue: '',
        resType: undefined,
        sort: 1,
        parentId: ''
      }
    },
    // 关闭模态框
    handleVisible () {
      this.$emit('update:operateVisible', false)
      this.resetForm()
    },
    // 提交关闭抽屉
    handleConfirmVisible (text) {
      this.resetForm()
      this.editId = ''
      this.$emit('handleVisible', false)
    }
  }
}
</script>
<style lang="scss">
</style>
